<template>
	<view :style="$s.view_color">
		<view class="page-user">
			<view class="page-user-header" :style="'background:url('+$config.design.member_bg+') no-repeat;background-size: 100%;'">
				<view class="page-user-headerinfo" @click="checkLogin">
					<image class="user-avatar" mode="aspectFill" :src="user_info.avatar"></image>
					<view class="name-info">
						<view>{{user_info.nickname}}</view>
						<view class="level-info" :style="{color:$s.theme}" v-if="user_info.level_name">[ {{user_info.level_name}} ]</view>
					</view>
				</view>
			</view>
			
			<view class="number-box v-ty" v-if="$config.base.is_app_audit==2">
				<u-grid :border="true" col="3">
				    <u-grid-item>
						<navigator url="/pages/user/recharge/log" class="number-nav">
							<text class="number-val">￥ {{user_info.now_money || '0.00'}}</text>
							<text class="number-name">余额</text>
						</navigator>
					</u-grid-item>
					<u-grid-item>
						<navigator url="/pages/user/integral/log" class="number-nav">
							<text class="number-val">{{user_info.now_integral || 0}} 分</text>
							<text class="number-name">积分</text>
						</navigator>
					</u-grid-item>
					<u-grid-item>
						<navigator url="/pages/coupon/my" class="number-nav" v-if="$config.plugin.coupon==1">
							<text class="number-val">{{user_info.coupon_total || 0}} 张</text>
							<text class="number-name">优惠券</text>
						</navigator>
					</u-grid-item>
				</u-grid>
			</view>
			
			<view class="grid-box v-ty">
				<u-grid :border="true" col="4" @click="toOrder">
				    <u-grid-item v-for="(item,index) in girdList" :key="index" :name="index">
						<u-badge :bgColor="$s.theme" :color="$s.fontcolor" max="99" :value="item.count" :absolute="true" :offset="[2,12]" :showZero="true"></u-badge>
						<my-imgicon :name="item.icon" :size="26" ></my-imgicon>
						<text class="grid-text">{{item.title}}</text>
					</u-grid-item>
				</u-grid>
			</view>
		 
			<block v-for="(val,k) in list_option" :key="k">
				<view class="list-box" v-if="list_show_type===1">
					<block  v-for="(item,index) in val.data" :key="index">
					<u-cell-group :border="false">
						<u-cell :icon="item.icon_name" :title="item.name" isLink @click="optionAction(item.url)"></u-cell>
					</u-cell-group>
					</block>
				</view>
			</block>
						
			<block v-for="(val,k) in list_option" :key="k">
			<view class="user-order-line v-ty" v-if="list_show_type===2">
				<view class="user-order-title" v-if="val.title!=''">{{val.title}}</view>
				<u-grid :col="4" :border="val.border">
					<u-grid-item v-for="(item,index) in val.data" :key="index">
						<!-- #ifdef MP-WEIXIN -->
						<button class="hide-button" :open-type="item.action==='contact'?'contact':''" @click="optionAction(item.url)">
							<my-imgicon :name="item.icon_name" :color="item.color" :size="val.icon_size" ></my-imgicon>
							<u-gap height="3"></u-gap>
							<text class="grid-text">{{item.name}}</text>
						</button>
						<!-- #endif -->
						<!-- #ifdef MP-ALIPAY -->
						<view class="hide-button" @click="optionAction(item.url)">
							<my-imgicon :name="item.icon_name" :color="item.color" :size="val.icon_size" v-if="item.action!=='contact'"></my-imgicon>
							<contact-button :tnt-inst-id="$config.alipay.contact.tntinstid" :scene="$config.alipay.contact.scene" v-if="item.action==='contact'"/>
							<u-gap height="3"></u-gap> 
							<text class="grid-text">{{item.name}}</text>
						</view>
						<!-- #endif -->
					</u-grid-item>
				</u-grid>
			</view>
			</block>
		</view>
		<my-tabbar></my-tabbar>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	import $agent from '@/common/agent'
	export default {
		data() {
			return {
				nav_title:'首页',
				girdList: [],
				user_info:{
					nickname:"请登陆",
					avatar:"/static/images/login-icon.png",
					level_name:"",
				},						//用户信息
				is_agent:false,
				list_show_type:2,					//选项显示方式
				list_option:[
					{
						title:'我的服务',
						border:false,
						icon_size:32,
						data:[
							  {
								icon_name: "liaotianshenqing",
								name: "申请分销",
								color: "#333333",
								url: 'agent/apply',
							  },
							  {
								icon_name: "recharge",
								name: "充值余额",
								color: "#333333",
								url: 'user/recharge/index',
							  },
							  {
								icon_name: "huiyuan",
								name: "会员等级",
								color: "#333333",
								url: 'user/level/index',
							  },
							  {
								icon_name: "liaoba",
								name: "在线客服",
								color: "#333333",
								url: '', // 在线客服无URL时需要特殊处理
							  },
							  {
								icon_name: "zixun",
								name: "常见问题",
								color: "#333333",
								url: 'articles/index/index',
							  },
							  {
								icon_name: "women",
								name: "关于我们",
								color: "#333333",
								url: 'user/about/index',
							  },
							  {
								icon_name: "shezhi",
								name: "设置中心",
								color: "#333333",
								url: 'user/seting/index',
							  }
						]
					}
				],
			}
		},
		onLoad(){
			this.initData();
			this.isAgentStatus();
		},
		onShow(){			
			this.getUserInfo();
			
			//获取订单状态数量
			this.$u.api.orderCount().then(res=>{
				this.girdList=res.data
			})
		},
		computed:{
			...mapState({
				userInfo:state => state.$userInfo,
			}),
		},
		methods: {
			async initData(){
				await this.$configResolve
				//判断是否开启优惠券
				if(this.$config.plugin.coupon==1){
					this.list_option[0].data.splice(1,0,{
						icon_name:"coupon",
						name:"优惠券",
						color:"#333333",
						url:'coupon/user/index',
					})
					this.list_option[0].data.splice(2,0,{
						icon_name:"dikou",
						name:"领券中心",
						color:"#333333",
						url:'coupon/list/index',
					})
				}
			},
			//判断是否分销状态
			async isAgentStatus(){
				let is_agent=false
				if(this.isLogin){
					//判断分销状态
					is_agent = await $agent.isAgent();
					if(is_agent===true){
						this.list_option[0].data[0].name="分销中心"
						this.list_option[0].data[0].url="agent/index"
						this.list_option[0].data[0].icon_name="tuandui"
						
					}else{
						this.list_option[0].data[0].name="申请分销"
						this.list_option[0].data[0].url="agent/apply"
						this.list_option[0].data[0].icon_name="liaotianshenqing"
					}
				}
			},
			// 获取用户信息
			getUserInfo(){
				if(this.isLogin){
					uni.$u.api.userInfo().then(res=>{
						let user=res.data.member;
						this.user_info=user;
					})
				}
			},
			//点击头像登陆
			checkLogin(){
				if(!this.isLogin){
					this.$c.a('user/login/index')
				}
			},
			//跳转订单
			toOrder(index){
				uni.setStorageSync('tab_index',);
				this.$c.a('index/order',{i:index+1})
			},
			//按钮操作
			optionAction(url){
				if (url) {
				    this.$c.a(url);
				} else {
					// 进行其他判断操作，例如处理没有URL的项
					console.log("执行自定义操作");
				}
			}
		}
	}
</script>

<style lang="scss">
	.page-user {
	    padding-bottom: 0!important;
	}
	
	.page-user-headerinfo {
	    display: -ms-flexbox;
	    display: flex;
	    margin-top: 50rpx;
	    margin-bottom: 40rpx;
		padding-left: 40rpx;
	}
	
	.page-user-headerinfo .name-info{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items:flex-start;
		color: #FFFFFF;
		font-size: 32rpx;
		margin-left: 30rpx;
		line-height: 50rpx;
	}
	
	.page-user-headerinfo .level-info{
		font-size: 28rpx;
	}
	
	.page-user-header .user-avatar{
		display: block;
		width: 130rpx;
		height: 130rpx;
		border-radius: 50%;
		overflow: hidden;
		background-color: rgba(255, 255, 255, 0.7);
		margin-right: 20rpx;
	}
	
	.page-user-headerinfocontent {
	    display: -ms-flexbox;
	    display: flex;
	    flex-direction: column;
	    -ms-flex-pack: distribute;
	    justify-content: space-around;
	    margin-left: 30rpx;
	}
	
	.page-user-name {
	    height: 60rpx;
	    color: #fff;
	    font-size: 48rpx;
	    line-height: 1;
	}
	
	.page-user-phone {
	    color: #11846f;
	    font-size: 24rpx;
	    line-height: 1;
	}
	
	.page-user-header {
	    padding: 100rpx 40rpx 100rpx;
	    background-size: cover;
		background-color: var(--view-theme);
	}
	
	.page-user-walletitem {
	    display: -ms-flexbox;
	    display: flex;
	    flex-direction: column;
	    -ms-flex-align: center;
	    align-items: center;
	}
	
	.page-user-walletitem--title {
	    margin-bottom: 20rpx;
	    color: #fff;
	    font-size: 50rpx;
	    line-height: 1;
	}
	
	.page-user-walletitem--des {
	    color: rgba(8,116,96,.8);
	    font-size: 24rpx;
	    line-height: 1;
	}
	
	.page-user-wallet {
	    position: relative;
	    display: -ms-flexbox;
	    display: flex;
	    -ms-flex-pack: justify;
	    justify-content: space-between;
	    padding: 0 25rpx;
	}
	
	.page-user-wallet::after,.page-user-wallet::before {
	    position: absolute;
	    top: 30rpx;
	    width: 2rpx;
	    height: 30rpx;
	    background-color: rgba(255,255,255,.3);
	    border-radius: 1px;
	    content: '';
	}
	
	.page-user-wallet::before {
	    left: 33%;
	}
	
	.page-user-wallet::after {
	    right: 28%;
	}
	.list-box{
		// margin-top: 50rpx;
		margin-top: 10rpx;
		padding: 0rpx 10rpx;
	}
	.grid-text{
		font-size: 24rpx;
	}
	.grid-box{
		border-radius: 15rpx;
		margin: 20rpx;
		padding: 25rpx 15rpx;
		background-color: #FFFFFF;
	}
	
	.user-order-line{
		background-color: #FFFFFF;
		margin:30rpx 20rpx 0rpx 20rpx;
		margin-buttom: 0rpx;
		padding: 10px 0px;
		border-radius: 22rpx;
	}
	.user-order-line .user-order-title{
		font-size: 28rpx;
		font-weight: 600;
		padding-left:24px;
		margin-bottom: 20rpx;
		line-height: 24px;
		height: 30px;
		// border-bottom: 1px solid $u-border-color;
	}
	.user-order-line .hide-button{
		margin-bottom: 40rpx;
		position: relative;
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		text-align: center;
		text-decoration: none;
		line-height: 1;
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
		background-color: #fff;
		width: 100%;
		height: 100%;
		border: 0;
	}
	.user-order-line .hide-button::after{
		border: 0;
		background-color: none;
	}
	.number-box{
		border-radius: 15rpx;
		margin: 20rpx;
		margin-top: -60rpx;
		padding: 25rpx 15rpx;
		background-color: #FFFFFF;
		.number-nav{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;
			.number-name{
				font-size: 24rpx;
			}
			.number-val{
				font-size: 30rpx;
				margin-bottom: 10rpx;
			}
		}
		
	}
</style>
